<template>
    <div class="echarts" ref="echartsLine" :style="{ minHeight: '180px' }">
    </div>
</template>
<script>
import { onResizeChang } from '../js/common';
export default {
    name: 'lines',
    props: {
        // 类型
        type: {
            type: String,
        },
        // 一些配置项
        setting: {
            type: Object,
            default: {}
        },
        // 数据
        data: {
            type: [Object, Array],
            default: [],
        },
    },
    data() {
        return {
        }
    },
    created() {
        // 监听屏幕改变的话就调用
        onResizeChang('start', this.onResizeChange)
    },
    methods: {
        echartInit() {
            var myChart = this.$echarts.init(this.$refs.echartsLine);
            let type = this.type;
            var option = {
                // 图例位置
                // legend: {},
                // 图像大小
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '0%',
                    top: '10%',
                    containLabel: true,
                },
                textStyle: {
                    color: "#ffffff"
                },
                tooltip: {
                    trigger: 'axis', // 触发类型：坐标轴触发
                    axisPointer: {
                        type: 'cross' // 十字准线指示器，显示指示线的样式
                    }
                },
                xAxis: {
                    type: 'category',
                    data: this.getSplitData.label,
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    type: 'line',
                    itemStyle: {
                        normal: {
                            // color: function (params) {
                            //     // 定义颜色列表
                            //     var colorList = [
                            //         '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
                            //         '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                            //         '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
                            //     ];
                            //     return colorList[params.dataIndex];
                            // }
                            color: '#60C0DD'
                        }
                    },
                    lineStyle: {
                    },
                    label: {
                        show: true
                    },
                    data: this.getSplitData.value,
                    markLine: {
                        data: [
                        ],
                        lineStyle: {
                            color: '#FCC31F',
                            type: 'dotted', // 设置为虚线
                            // 鼠标悬停样式
                            emphasis: {
                                type: 'dotted' // 鼠标悬浮时线变为实线
                            }
                        },
                        label: {
                            show: true,
                            color: '#FCC31F',
                            formatter: (a) => {
                                return a.name;
                            },
                            position: 'insideStartBottom',
                        },
                        // 不要起始点样式
                        symbol: ['none', 'none'],
                    }
                }]
            };
            // 判断有没有辅助线
            if (this.setting && Array.isArray(this.setting.markLine) && this.setting.markLine.length > 0) {
                let markLineArr = markLineF(this.setting.markLine);
                option.series[0].markLine.data = markLineArr;
            }
            myChart.setOption(option);
        },
        // 重新计算
        onResizeChange() {
            var myChart = this.$echarts.init(this.$refs.echartsLine);
            myChart.resize();
        }
    },
    mounted() {
    },
    watch: {
        data(newVal, oldVal) {
            // 当 parentData 变化时，这个函数会被调用
            this.echartInit();
        }
    },
    computed: {
        // data里面包含 label value
        getSplitData() {
            let arr = {
                label: [],
                value: [],
            };
            this.data.filter((val, index) => {
                arr['label'].push(val.label);
                arr['value'].push(val.value);
            })
            return arr
        }
    },
    // 销毁
    beforeDestroy() {
        onResizeChang('end', this.onResizeChange)
    }
}
</script>
<style lang="less" scoped>
.echarts {
    width: 100%;
    height: 100%;
}
</style>